<template>
  <view class="top">
    <view class="top-tab">
      <view
        class="top-tab__li"
        :class="{ 'top-tab__li-active': current === index }"
        @click="onTab(index)"
        v-for="(item, index) in tab"
        :key="index"
        >{{ item }}</view
      >
    </view>
    <Loading :status="loading ? 'loading' : ''" v-if="loading" />
    <swiper class="swiper" @change="onSwiper" :current="current" v-if="list.hits_day.length">
      <swiper-item v-for="(item, index) in tab" :key="index">
        <scroll-view scroll-y="true" class="scroll-Y">
          <Item :datalist="list[week[index]]" v-if="list[week[index]].length" />
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Item from '@/components/Item/list2v3.vue'
import Loading from '@/components/Loading'
export default {
  data() {
    return {
      list: {
        hits_day: [],
        hits_week: [],
        hits_month: [],
        hits: []
      },
      loading: false,
      week: ['hits_day', 'hits_week', 'hits_month', 'hits'],
      tab: ['日榜', '周榜', '月榜', '总榜'],
      current: 0
    }
  },
  methods: {
    ...mapActions('list', ['getList']),
    getData(order) {
      this.loading = true
      this.getList({
        order,
        id: 3,
        limit: 50
      }).then(res => {
        this.list[order] = res.data
        this.loading = false
      })
    },
    onTab(index) {
      this.current = index
    },
    onSwiper(e) {
      this.current = e.detail.current
    }
  },
  mounted() {
    this.getData('hits_day')
    this.getData('hits_week')
    this.getData('hits_month')
    this.getData('hits')
  },
  components: {
    Item,
    Loading
  }
}
</script>

<style lang="scss" scoped>
.top {
  .swiper {
    min-height: calc(100vh - 170rpx - var(--status-bar-height) - var(--window-bottom));
  }

  &-tab {
    display: flex;
    height: 80rpx;
    line-height: 80rpx;
    border-bottom: 1px solid #dedede;
    text-align: center;

    &__li {
      flex: 1;

      &-active {
        color: #f60;
      }
    }
  }

  .scroll-Y {
    height: calc(100vh - 185rpx - var(--window-bottom));
  }
}
</style>
